<nz-card class="m-b-2">
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">外部标题</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入外部标题" [(ngModel)]="query.title"/>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">内部标题</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入内部标题" [(ngModel)]="query.insideTitle"/>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">状态</label>
        <div class="common-search-conrol">
          <nz-select
            [(ngModel)]="query.state"
            nzPlaceHolder="请选择状态"
            [nzMaxTagCount]="1"
            nzMode="multiple"
            nzAllowClear>
            <nz-option *ngFor="let item of statusOptions" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">发送时间</label>
        <div class="common-search-conrol">
          <nz-range-picker nzFormat="yyyy-MM-dd" [(ngModel)]="query.date"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item">
        <div class="common-search-conrol">
          <button nz-button nzType="primary" (click)="queryBtn()" class="m-r-8">查询</button>
          <button nz-button nzType="default" (click)="resetCondition()">重置</button>
        </div>
      </div>
    </div>
  </div>
</nz-card>

<nz-card class="pagination-wrap-position">
  <div class="operation-wrap p-b-15">
    <button
      *ngIf="permission.userPermission.has('customer-manage:email-manage:add')"
      nz-button
      nzType="primary"
      [routerLink]="['/customer-manage/send-emails']"
    >
      发送站内信
    </button>
  </div>

  <!--表格-->
  <nz-table
    #rowSelectionTable
    nzSize="small"
    nzShowSizeChanger
    nzShowQuickJumper
    nzOuterBordered
    [nzData]="listOfData.records"
    [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
    [nzTotal]="listOfData.total"
    [(nzPageIndex)]="query.page"
    [(nzPageSize)]="query.pageSize"
    [nzFrontPagination]="false"
    [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)"
  >
    <thead>
      <tr>
        <th nzAlign="center">ID</th>
        <th nzAlign="center">状态</th>
        <th nzAlign="center">消息类型</th>
        <th nzAlign="center">内部标题</th>
        <th nzAlign="center">外部标题</th>
        <th nzAlign="center">所属业务</th>
        <th nzAlign="center">发送客户数</th>
        <th nzAlign="center">创建时间</th>
        <th nzAlign="center">发送节点</th>
        <th nzAlign="center">操作</th>
      </tr>
    </thead>

    <tbody>
      <tr *ngFor="let data of rowSelectionTable.data;let index=index">
        <td nzAlign="center">{{ data['id'] }}</td>
        <td nzAlign="center"
            [ngStyle]="{color: customerManageService.computedColor(data['state']).color}">{{ customerManageService.computedColor(data['state']).name }}</td>
        <td nzAlign="center">{{ data['type'] === 0 ? '活动优惠' : '系统消息' }}</td>
        <td nzAlign="center">{{ data['insideTitle'] || '-' }}</td>
        <td nzAlign="center">{{ data['title'] || '-' }}</td>
        <td nzAlign="center">{{ customerManageService.getBusinessName(data['belongingBusiness']) }}</td>
        <td nzAlign="center">{{ data['userNumber'] || 0}}</td>
        <td nzAlign="center">{{ data['createTime'] || '-' }}</td>
        <td nzAlign="center">{{ data['sendType'] | sendTypeStatus }}</td>
        <td nzAlign="center" class="operation">
          <a
            *ngIf="customerManageService.computedColor(data['state']).btn.has('submitCheck')&&permission.userPermission.has('customer-manage:email-manage:submitCheck')"
            nz-button
            nzType="link"
            (nzOnConfirm)="submitCheck(data['id'])"
            nzPopconfirmPlacement="top"
            nz-popconfirm
            nzPopconfirmTitle="确认要提交审核吗?"
            nzOkText="确认"
            nzCancelText="取消">
            提交审核
          </a>
          <a
            *ngIf="customerManageService.computedColor(data['state']).btn.has('check')&&permission.userPermission.has('customer-manage:email-manage:check')"
            nz-button
            nzType="link"
            (click)="checkModalShow(data['id'])">
            审核
          </a>
          <a
            *ngIf="customerManageService.computedColor(data['state']).btn.has('edit')&&permission.userPermission.has('customer-manage:email-manage:edit')"
            nz-button
            nzType="link"
            (click)="toEdit(data)">
            编辑
          </a>
          <a
            *ngIf="customerManageService.computedColor(data['state']).btn.has('cancel')&&permission.userPermission.has('customer-manage:email-manage:cancel')"
            nz-button
            nzType="link"
            (nzOnConfirm)="cancelEmail(data['id'])"
            style="color: #F56C6C"
            nzPopconfirmPlacement="top"
            nz-popconfirm
            nzPopconfirmTitle="确认要取消吗?"
            nzOkText="确认"
            nzCancelText="取消">
            取消
          </a>
          <a
            *ngIf="customerManageService.computedColor(data['state']).btn.has('withdraw')&&permission.userPermission.has('customer-manage:email-manage:withdraw')"
            nz-button
            nzType="link"
            (nzOnConfirm)="withdrawEmail(data['id'])"
            style="color: #F56C6C"
            nzPopconfirmPlacement="top"
            nz-popconfirm
            nzPopconfirmTitle="确认要撤回吗?"
            nzOkText="确认"
            nzCancelText="取消">
            撤回
          </a>
          <a
            nz-button
            nzType="link"
            (click)="toDetail(data)">
            查看
          </a>
          <a
            *ngIf="permission.userPermission.has('customer-manage:email-manage:stop') && data['state'] === 7"
            nz-popconfirm
            nzPopconfirmTitle="确认提前终止?"
            (nzOnConfirm)="advanceStop(data)"
          >
            提前终止
          </a>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <!-- 分页template -->
  <ng-template #totalTemplate let-total>共有 {{ listOfData['total'] }} 条</ng-template>
</nz-card>

<!--审核模态框-->
<nz-modal [(nzVisible)]="checkModal.visible" nzTitle="审核" (nzOnCancel)="checkModalHide()">
  <div *nzModalContent>
    <nz-row style="margin-top: 8px">
      <nz-col nzSpan="4" style="text-align: left">
        <label for="cancelRemark">审核意见:</label>
      </nz-col>
      <nz-col nzSpan="15" nzOffset="1">
        <textarea id="cancelRemark" rows="4" nz-input placeholder="请输入备注"
                  [(ngModel)]="checkModal.remark"></textarea>
      </nz-col>
    </nz-row>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="primary" nzDanger (click)="checkReject()" [nzLoading]="checkModal.loading">拒绝</button>
    <button nz-button nzType="primary" (click)="checkResolve()" [nzLoading]="checkModal.loading">通过</button>
  </div>
</nz-modal>

